<template>
  <!--theme是自定义指令v-theme="'wide'" wide是字符串，注意引起来,column是传参-->
  <!--v-theme="'wide'" wide是字符串，注意引起来,column是传参-->
  <div v-theme:column="'narrow'" id="show-blogs">
    <h1>博客总览</h1>
    <input type="text" v-model="search" placeholder="搜索">
    <!--filterBlogs为computed中的函数-->
    <div v-for="blog in filterBlogs" class="single-blog">
      <!--v-rainbow是自定义指令-->
      <router-link :to="/blog/+blog.id">
          <h2 v-rainbow="">{{blog.title | to-uppercase}}</h2>
      </router-link>
      <article>
        {{blog.body | snippet}}
      </article>
    </div>
  </div>
</template>

<script>
  export default {
    name: "show-blogs",
    data() {
      return {
        blogs: [],
        search: ""
      }
    },
    created() {
      this.$http.get("http://jsonplaceholder.typicode.com/posts")
        .then(function (data) {
          this.blogs = data.body.slice(0, 10)
        })
    },
    computed: {
      filterBlogs: function () {
        //过滤符合条件的数据
        return this.blogs.filter((blog) => {
          return blog.title.match(this.search)
        })
      }
    },
    filters: {
      //过滤器第1种写法
      // "to-uppercase": function (value) {
      //   //模块过滤器，只作用于当前组件
      //   return value.toUpperCase();
      // }
      //过滤器第2种写法
      toUppercase(value) {
        return value.toUpperCase();
      },
      snippet(value) {
        return value.slice(0, 100) + "..."
      }
    },
    directives: {
      //自定义指令（只作用于当前模块）
      "rainbow": {
        bind(el, binding, vnode) {
          el.style.color = "#" + Math.random().toString(16).slice(2, 8)
        }
      }
    }
  }
</script>

<style scoped>
  #show-blogs {
    max-width: 800px;
    margin: 0px auto;
  }

  .single-blog {
    padding: 20px;
    margin: 20px 0;
    box-sizing: border-box;
    background: #eee;
    border: 1px dotted #aaa;
  }
  #show-blogs a{
    color: #444;
    text-decoration: none;
  }

  input[type="text"]{
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
  }

</style>
